<template>
    <div class="app-container">
        <div class="the-container">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column type="index" />
                <el-table-column prop="date" label="日期" show-overflow-tooltip />
                <el-table-column prop="name" label="姓名" show-overflow-tooltip />
                <el-table-column prop="province" label="省份" show-overflow-tooltip />
                <el-table-column prop="city" label="市区" show-overflow-tooltip />
                <el-table-column prop="address" label="地址" show-overflow-tooltip />
                <el-table-column prop="zip" label="邮编" show-overflow-tooltip />
                <el-table-column label="操作" width="120">
                    <template slot-scope="{row}">
                        <el-button type="text" @click="alter(row)">
                            修改
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <Amend ref="amend" @submit="refresh"></Amend>
    </div>
</template>
  
<script>
// 引入子组件
import Amend from './amend'
export default {
    components: {
        // 子组件名称
        Amend
    },
    data() {
        return {
            // 表格数据
            tableData: [{
                date: '2016-05-03',
                name: '小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-02',
                name: '小张',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-04',
                name: '小明',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-01',
                name: '小红',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-08',
                name: '小李',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-06',
                name: '小刘',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }]
        }
    },
    methods: {
        alter(row) {
            // 调用子组件方法并传参，row为该行数据
            this.$refs.amend.show(row)
            console.log(row)
        },
        refresh(data) {
            // 子组件调用父组件的方法并传参
            console.log(data)
        }
    }
}
</script>
  
<style  scoped>
.app-container {
    height: 100%;
    background-color: #f1f1f1;
}

.the-container {
    padding: 20px;
    height: 100%;
    background-color: #fff;
}
</style>
  